<%@page isELIgnored="false" pageEncoding="UTF-8" contentType="text/html; UTF-8" %>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>持明法洲登录页面</title>
		<link rel="stylesheet" href="layui/css/layui.css">
		 <link rel="stylesheet" href="css/main.css"  media="all">
		 <link rel="stylesheet" href="css/plugins/font-awesome-4.7.0/css/font-awesome.min.css"  media="all">
		<script src="layui/layui.js" type="text/javascript"></script>
	</head>
	<style>
		.layui-tab-content {
			padding: 0;/*layui-tab-content:默认有padding: 10px;的值，因为iframe的绝对定位脱离文档流，所以会存在20px的空白空间*/
		}
		.show-frame {
			top: 50px!important;
			/*默认.layui-layout-admin .layui-body {
                top: 60px;
                bottom: 44px;
            }*/
			overflow: hidden;/*消除浏览器最右边的滚动条*/
		}
		.frame {
			position: absolute;
			padding: 10px;/*与layui-footer隔开一段距离*/
			width: 100%;
			height: 100%;
		}
	</style>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
	<div class="layui-header">
		<div class="layui-logo">layui 后台布局</div>
		<!-- 头部区域（可配合layui已有的水平导航） -->
		<ul class="layui-nav layui-layout-left">
			<li class="layui-nav-item"><a href="">控制台</a></li>
			<li class="layui-nav-item"><a href="">商品管理</a></li>
			<li class="layui-nav-item"><a href="">用户</a></li>
			<li class="layui-nav-item">
				<a href="javascript:;">其它系统</a>
				<dl class="layui-nav-child">
					<dd><a href="">邮件管理</a></dd>
					<dd><a href="">消息管理</a></dd>
					<dd><a href="">授权管理</a></dd>
				</dl>
			</li>
		</ul>
		<ul class="layui-nav layui-layout-right">
			<li class="layui-nav-item">
				<a href="javascript:;">
					<img src="http://t.cn/RCzsdCq" class="layui-nav-img">
					贤心
				</a>
				<dl class="layui-nav-child">
					<dd><a href="">基本资料</a></dd>
					<dd><a href="">安全设置</a></dd>
				</dl>
			</li>
			<li class="layui-nav-item"><a href="">退了</a></li>
		</ul>
	</div>

	<div class="layui-side layui-bg-black">
		<div class="layui-side-scroll">
			<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
			<ul class="layui-nav layui-nav-tree"  lay-filter="test" id="menu1">
				<li class="layui-nav-item layui-nav-itemed">
					<a class="" href="javascript:;">所有商品</a>
					<dl class="layui-nav-child">
						<dd><a href="javascript:;">列表一</a></dd>
						<dd><a href="javascript:;">列表二</a></dd>
						<dd><a href="javascript:;">列表三</a></dd>
						<dd><a href="">超链接</a></dd>
					</dl>
				</li>
				<li class="layui-nav-item">
					<a href="javascript:;">解决方案</a>
					<dl class="layui-nav-child">
						<dd><a href="javascript:;">列表一</a></dd>
						<dd><a href="javascript:;">列表二</a></dd>
						<dd><a href="">超链接</a></dd>
					</dl>
				</li>
				<li class="layui-nav-item"><a href="">云市场</a></li>
				<li class="layui-nav-item"><a href="">发布商品</a></li>
			</ul>
		</div>
	</div>

	<div class="layui-body show-frame">
		<!-- 内容主体区域 -->
		<div class="layui-tab" lay-allowClose="true" lay-filter="demo">
			<ul class="layui-tab-title">
				<li class="layui-this">首页</li>
			</ul>
			<div class="layui-tab-content">
				<div class="layui-tab-item layui-show"></div>
			</div>
		</div>
	</div>

	<div class="layui-footer">
		<!-- 底部固定区域 -->
		© layui.com - 底部固定区域
	</div>
</div>

<script src="js/jquery-1.12.4.js"></script>
<script>
	//JavaScript代码区域
	layui.use('element', function(){
		var element = layui.element;
		var $ = layui.$;
		$(".c1").click(function () {
			console.log("=========")
			var id = $(this).attr('id')
			if ($('li[lay-id='+id+']').length==0){
				element.tabAdd('demo',{
					title:$(this).attr("title")
					,content:'<iframe class="frame"  frameborder="0" src="' + $(this).attr("url") + '"/>'
					,id:id
				})
			}
				element.tabChange("demo", id);
		});
		element.render('nav');
	});
	var content;
	$.ajax({
		url:'${pageContext.request.contextPath}/menu/selectAll'
		,async:false
		,success:function (result) {
			$.each(result,function (i,obj) {
				content += '<li class="layui-nav-item layui-nav-itemed"><a class="" href="javascript:;">'+obj.name+'</a>'
				$.each(obj.menus,function (j,obj2) {
					content += '<dl class="layui-nav-child"><dd><a href="javascript:;" id="'+obj2.id+'" title="'+obj2.name+'" url="/cmfz'+obj2.url+'" class="c1">'+obj2.name+'</a></dd></dl>'
				})
				content += '</li>';
			})
			$("#menu1").html(content);
			console.log(content)
		}
	});

</script>
</body>
</html>
